<template>
  <el-card class="index-container">
    <el-table
      :load="loading"
      :data="tableData"
      tooltip-effect="dark"
      style="width: 100%"
    >
      <el-table-column prop="configName" label="商品名称" />
      <el-table-column prop="" label="跳转链接">
        <template #default="scope">
          <a target="_blank" :href="scope.row.redirectUrl">{{
            scope.row.redirectUrl
          }}</a>
        </template>
      </el-table-column>
      <el-table-column prop="configRank" label="排序值" />
      <el-table-column prop="goodsId" label="商品编号" />
      <el-table-column prop="createTime" label="添加时间" />
      <el-table-column prop="" label="操作">
        <template #default="scope">
          <a
            style="cursor: pointer; margin-right: 10px"
            @click="handleEdit(scope.row.configId)"
            >修改</a
          >
          <el-popconfirm
            title="确定删除吗？"
            confirmButtonText="确定"
            cancelButtonText="取消"
            @confirm="handleDeleteOne(scope.row.configId)"
          >
            <template #reference>
              <a style="cursor: pointer">删除</a>
            </template>
          </el-popconfirm>
        </template>
      </el-table-column>
    </el-table>
    <el-pagination
      background
      layout="prev, pager, next"
      :total="total"
      :page-size="pageSize"
      :current-page="currentPage"
      @current-change="changePage"
    />
  </el-card>
</template>

<script>
import {
  onUnmounted,
  onMounted,
  ref,
  reactive,
  toRefs,
} from "@vue/runtime-core";
import { useRoute, useRouter } from "vue-router";
import axios from "@/utils/axios";
// 首页配置参数
const configTypeMap = {
  hot: 3,
  new: 4,
  recommend: 5,
};
export default {
  name: "IndexConfig",
  setup() {
    const router = useRouter();
    const route=useRoute();
    const state=reactive({
        loading:false,
        tableData:[],
        total:0,//总条数
        currentPage:1, //当前页
        pageSize:10,
        type:'add',
        configType:3
    })
    // 监听路由变化
    router.beforeEach((to)=>{
        if(['hot','new','recommend'].includes(to.name)){
            state.configType=configTypeMap[to.name]
            state.currentPage=1
            getIndexConfig()
        }
    })
    // 初始化
    onMounted(()=>{
        state.configType=configTypeMap[route.name]
        getIndexConfig()
    })
    // 首页热销商品列表
    const getIndexConfig=()=>{
        state.loading=true
        axios.get('/indexConfigs',{
            params:{
                pageNumber:state.currentPage,
                pageSize:state.pageSize,
                configType:state.configType
            }
        }).then(res=>{
            state.tableData=res.list
            state.total=res.totalCount
            state.currentPage=res.currPage
            state.loading=false
        })
    }
    const changePage=(val)=>{
        state.currentPage=val
        getIndexConfig()
    }
    return {
        ...toRefs(state),
        getIndexConfig,
        changePage
    }
    // // 监听路由变化
    // const unWatch = router.beforeEach((to) => {
    //   console.log("to", to.name);
    // });

    // onUnmounted(() => {
    //   //当组件销毁的时候，路由守卫就会被销毁
    //   unWatch();
    // });
  },
};
</script>

<style>
</style>